<template>
    <div class="container">
        <!--   顶部的滑动区域-->
        <div id="slider" class="mui-slider ">
            <div id="sliderSegmentedControl"
                 class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a :class="['mui-control-item',item.id===0 ? 'mui-active' : '']" v-for="item in cates"
                       :key="item.id" @tap="getPhotoListByCateId(item.id)">
                        {{item.title}}
                    </a>
                </div>
            </div>
        </div>
        <!--   图片列表区域    -->
        <ul class="photo-list">
            <!-- router-link 默认渲染是a标签，用tag指定渲染为li           -->
            <router-link v-for="(item,index) in list" :key="index"
                         :to="'/home/photoinfo/'+item.id" tag="li">
                <img v-lazy="item.img_url">
                <div class="info">
                    <h1 class="info-title">{{item.title}}</h1>
                    <div class="info-body">{{item.zhaiyao}}</div>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
    //导入mui
    import mui from '../../lib/mui/js/mui.js'
    //引用弹框
    import {Toast} from 'mint-ui'

    export default {
        data() {
            return {
                cates: [],//所有分类列表的数组
                list: [],//图片列表的数组
            };
        },
        created() {
            this.getAllCategory();//调用方法
            //默认进入页面就主动请求,全部的链接的图片的加载
            this.getPhotoListByCateId(0);
        },
        mounted() {//当组件中的DOM结构被渲染好并放大页面中后，会执行这个钩子函数
            //如果要操作元素，最好要在mouted里面，因为这时候的dom元素是最新的
            //2.初始化滑动控件
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },

        methods: {
            getAllCategory() {//获取所有的图片分类方法

                //使用vue-resource方式
                // this.$http.get('api/getimgcategory').then(result => {
                //     if (result.body.status === 0) {
                //         //说明获取成功了
                //         //手动拼接出一个最完整的分类列表
                //         console.log(result.body);//说明获取到了
                //         result.body.message.unshift({title: "全部", id: 0});
                //         this.cates = result.body.message;//将拼接好的给cates
                //     } else {
                //         //说明失败了
                //         Toast('图片分类获取失败了');
                //     }
                // });

                this.axios.get('api/getimgcategory').then(result => {
                    //说明成功了
                    //手动拼接出一最个完整的分类列表
                    result.data.message.unshift({title: "全部", id: 0});
                    this.cates = result.data.message;//将拼接好的给cates
                }).catch(result => {
                    //说明失败
                    Toast('获取图片列表失败了');
                })
            },
            getPhotoListByCateId(cateId) {//根据分类id，获取图片列表
                this.axios.get('/api/getimages/' + cateId).then(result => {
                    this.list = result.data.message;
                }).catch(result => {
                    Toast('图片列表获取失败！！！');
                })
            }


        }
    }
</script>
<style lang="scss" scoped>
    * {
        touch-action: pan-y;
    }

    .container {
        width: 100%;

        #slider {
            .mui-scroll {
                font-size: 25px;
                margin-left: 50px;
                font-weight: bolder;
            }
        }

        .photo-list {
            list-style: none;
            margin: 0;
            padding: 10px;
            padding-bottom: 0px;

            li {
                text-align: center;
                background-color: #cccccc;
                margin-bottom: 10px;
                box-shadow: 0 0 9px #999999;
                position: relative;

                img[lazy=loading] {
                    width: 40px;
                    height: 300px;
                    margin: auto;
                }

                img {
                    width: 100%;
                    vertical-align: middle;
                }

                .info {
                    color: #ffffff;
                    position: absolute;
                    z-index: 1;
                    bottom: 0px;
                    text-align: left;
                    background-color: rgba(0, 0, 0, 0.4);
                    max-height: 84px;

                    .info-title {
                        font-size: 18px;
                    }

                    .info-body {
                        font-size: 13px;
                    }
                }
            }
        }
    }


</style>